<template>
    <div id="input">
        <span @click="minus">-</span>
        <span class="count">{{count}}</span>
        <span @click="add">+</span>
    </div>
</template>

<script>

    export default{
        data(){
            return{
                //初始购买数量
                count:1
            }
        },

        methods:{
            //减
            minus(){
                this.count--;
                if(this.count<1){
                    this.count=1;
                }
                this.sendCount();
            },
            //加
            add(){
                this.count++;
                this.sendCount();
            },
            //count值传递给购物车的徽章
            sendCount(){
                //count的值 = this.count
                this.$emit('count',this.count);
                console.log(this.count);
            }

        }

    }
</script>
<style scoped>
    span{
        border: 1px solid #ccc;
        display: inline-block;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
    .count{
        width: 60px;
    }
</style>